| Conditions | 5 |
| Total Lines | 204 |
| Code Lines | 174 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | import React from "react"; |
||
| 255 | |||
| 256 | public render(): React.ReactElement { |
||
| 257 | const { application, reviewStatusOptions, isSaving, intl } = this.props; |
||
| 258 | const l10nReviewStatusOptions = reviewStatusOptions.map(status => ({ |
||
| 259 | value: status.value, |
||
| 260 | label: intl.formatMessage(messages[status.label]), |
||
| 261 | })); |
||
| 262 | const { selectedStatusId } = this.state; |
||
| 263 | const reviewStatus = |
||
| 264 | application.application_review && |
||
| 265 | application.application_review.review_status |
||
| 266 | ? application.application_review.review_status.name |
||
| 267 | : null; |
||
| 268 | const statusIconClass = className("fas", { |
||
| 269 | "fa-ban": reviewStatus === "screened_out", |
||
| 270 | "fa-question-circle": reviewStatus === "still_thinking", |
||
| 271 | "fa-check-circle": reviewStatus === "still_in", |
||
| 272 | "fa-exclamation-circle": reviewStatus === null, |
||
| 273 | }); |
||
| 274 | |||
| 275 | const getSaveButtonText = (): string => { |
||
| 276 | if (isSaving) { |
||
| 277 | return intl.formatMessage(messages.saving); |
||
| 278 | } |
||
| 279 | if (this.isUnchanged()) { |
||
| 280 | return intl.formatMessage(messages.saved); |
||
| 281 | } |
||
| 282 | return intl.formatMessage(messages.save); |
||
| 283 | }; |
||
| 284 | const saveButtonText = getSaveButtonText(); |
||
| 285 | const noteButtonText = |
||
| 286 | application.application_review && application.application_review.notes |
||
| 287 | ? intl.formatMessage(messages.editNote) |
||
| 288 | : intl.formatMessage(messages.addNote); |
||
| 289 | return ( |
||
| 290 | <div> |
||
| 291 | <div> |
||
| 292 | <div className="manager-application-preview-actions flex-grid"> |
||
| 293 | <div className="box small-1of3"> |
||
| 294 | <button |
||
| 295 | className="button--blue light-bg" |
||
| 296 | type="button" |
||
| 297 | onClick={() => |
||
|
|
|||
| 298 | this.handleLinkClicked( |
||
| 299 | routes.managerJobApplications( |
||
| 300 | intl.locale, |
||
| 301 | application.job_poster_id, |
||
| 302 | ), |
||
| 303 | ) |
||
| 304 | } |
||
| 305 | > |
||
| 306 | <FormattedMessage |
||
| 307 | id="apl.backToApplicantList" |
||
| 308 | defaultMessage="< Save and Go Back to Applicant List" |
||
| 309 | description="Back Button text" |
||
| 310 | /> |
||
| 311 | </button> |
||
| 312 | </div> |
||
| 313 | <div className="box small-2of3"> |
||
| 314 | <button |
||
| 315 | className="button--blue light-bg" |
||
| 316 | type="button" |
||
| 317 | onClick={() => |
||
| 318 | this.handleLinkClicked( |
||
| 319 | routes.managerJobShow( |
||
| 320 | intl.locale, |
||
| 321 | application.job_poster_id, |
||
| 322 | ), |
||
| 323 | ) |
||
| 324 | } |
||
| 325 | > |
||
| 326 | <FormattedMessage |
||
| 327 | id="button.viewJobPoster" |
||
| 328 | defaultMessage="View Job Poster" |
||
| 329 | description="View Job Poster Button text" |
||
| 330 | /> |
||
| 331 | </button> |
||
| 332 | <button |
||
| 333 | className="button--blue light-bg" |
||
| 334 | data-button-type="expand-all" |
||
| 335 | type="button" |
||
| 336 | id="expand-all" |
||
| 337 | > |
||
| 338 | <span className="expand"> |
||
| 339 | {" "} |
||
| 340 | <FormattedMessage |
||
| 341 | id="apl.expandAllSkills" |
||
| 342 | defaultMessage="Expand All Skills" |
||
| 343 | description="Expand All Skills Button text" |
||
| 344 | /> |
||
| 345 | </span> |
||
| 346 | <span className="collapse"> |
||
| 347 | {" "} |
||
| 348 | <FormattedMessage |
||
| 349 | id="apl.collapseAllSkills" |
||
| 350 | defaultMessage="Collapse All Skills" |
||
| 351 | description="Collapse All Skills Button text" |
||
| 352 | /> |
||
| 353 | </span> |
||
| 354 | </button> |
||
| 355 | </div> |
||
| 356 | </div> |
||
| 357 | </div> |
||
| 358 | |||
| 359 | <form className="applicant-summary"> |
||
| 360 | <div className="flex-grid middle gutter"> |
||
| 361 | <div className="box lg-1of11 applicant-status"> |
||
| 362 | <i className={statusIconClass} /> |
||
| 363 | </div> |
||
| 364 | |||
| 365 | <div className="box lg-2of11 applicant-information"> |
||
| 366 | <span className="name"> |
||
| 367 | {application.applicant.user.first_name}{" "} |
||
| 368 | {application.applicant.user.last_name} |
||
| 369 | </span> |
||
| 370 | <a |
||
| 371 | href={`mailto: ${application.applicant.user.email}`} |
||
| 372 | title={intl.formatMessage(messages.emailCandidate)} |
||
| 373 | > |
||
| 374 | {application.applicant.user.email} |
||
| 375 | </a> |
||
| 376 | {/* This span only shown for veterans */} |
||
| 377 | {(application.veteran_status.name === "current" || |
||
| 378 | application.veteran_status.name === "past") && ( |
||
| 379 | <span className="veteran-status"> |
||
| 380 | <img |
||
| 381 | alt={intl.formatMessage(messages.viewApplicationTitle)} |
||
| 382 | src="/images/icon_veteran.svg" |
||
| 383 | />{" "} |
||
| 384 | <FormattedMessage |
||
| 385 | id="veteranStatus.veteran" |
||
| 386 | defaultMessage="Veteran" |
||
| 387 | description="Veteran" |
||
| 388 | /> |
||
| 389 | </span> |
||
| 390 | )} |
||
| 391 | </div> |
||
| 392 | |||
| 393 | <div className="box lg-2of11 applicant-links"> |
||
| 394 | <a |
||
| 395 | title={intl.formatMessage(messages.viewApplicationTitle)} |
||
| 396 | href={routes.managerApplicationShow( |
||
| 397 | intl.locale, |
||
| 398 | application.id, |
||
| 399 | )} |
||
| 400 | > |
||
| 401 | <i className="fas fa-file-alt" /> |
||
| 402 | <FormattedMessage |
||
| 403 | id="apl.viewApplication" |
||
| 404 | defaultMessage="View Application" |
||
| 405 | description="Button text View Application" |
||
| 406 | /> |
||
| 407 | </a> |
||
| 408 | <a |
||
| 409 | title={intl.formatMessage(messages.viewProfileTitle)} |
||
| 410 | href={routes.managerApplicantShow( |
||
| 411 | intl.locale, |
||
| 412 | application.applicant_id, |
||
| 413 | )} |
||
| 414 | > |
||
| 415 | <i className="fas fa-user" /> |
||
| 416 | <FormattedMessage |
||
| 417 | id="apl.viewProfile" |
||
| 418 | defaultMessage="View Profile" |
||
| 419 | description="Button text View Profile" |
||
| 420 | /> |
||
| 421 | </a> |
||
| 422 | </div> |
||
| 423 | |||
| 424 | <div className="box lg-2of11 applicant-decision" data-clone> |
||
| 425 | <Select |
||
| 426 | id={`review_status_${application.id}`} |
||
| 427 | name="review_status" |
||
| 428 | label={intl.formatMessage(messages.decision)} |
||
| 429 | required={false} |
||
| 430 | selected={selectedStatusId || null} |
||
| 431 | nullSelection={intl.formatMessage(messages.notReviewed)} |
||
| 432 | options={l10nReviewStatusOptions} |
||
| 433 | onChange={this.handleStatusChange} |
||
| 434 | /> |
||
| 435 | </div> |
||
| 436 | |||
| 437 | <div className="box lg-2of11 applicant-notes"> |
||
| 438 | <button |
||
| 439 | className="button--outline" |
||
| 440 | type="button" |
||
| 441 | onClick={this.showNotes} |
||
| 442 | > |
||
| 443 | {noteButtonText} |
||
| 444 | </button> |
||
| 445 | </div> |
||
| 446 | |||
| 447 | <div className="box lg-2of11 applicant-save-button"> |
||
| 448 | <button |
||
| 449 | className="button--blue light-bg" |
||
| 450 | type="button" |
||
| 451 | onClick={() => this.handleSaveClicked()} |
||
| 452 | > |
||
| 453 | <span>{saveButtonText}</span> |
||
| 454 | </button> |
||
| 455 | </div> |
||
| 456 | </div> |
||
| 457 | </form> |
||
| 458 | </div> |
||
| 459 | ); |
||
| 464 |